<template>
  <div class="login">
    <div class="login1" v-if="!isplay" ref="pswdForm">
        <h3>登录</h3>
        <van-field required v-model="loginRefs.text" label="账号" placeholder="请输入账号" />
        <van-field required v-model="loginRefs.password" type="password" label="密码" placeholder="请输入密码" />
        <van-button type="primary" size="large" @click="onLogin()">登录</van-button>
        <p @click="onBack">点击注册</p>
    </div>
    <div class="login2" v-else ref="pswdForm">
        <h3>注册</h3>
        <van-field
                v-model="loginRefs.phone"
                required
                maxlength="11"
                label="手机号"
                placeholder="请输入手机号"
            />
        <van-field required v-model="loginRefs.text" label="账号" />
        <van-field required v-model="loginRefs.password" type="password" label="密码" />
        <van-button type="primary" size="large" @click="zhuce">注册</van-button>
        <p @click="onTrue">点击登录</p>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name:"LoginView",
    data() {
        return {
        loginRefs:{
            phone:"",
            text:"",
            password:"",
        },
        isplay:false,
        };
    },
    methods: {
        onBack(){
            this.isplay=true;
        },
        onTrue(){
            this.isplay=false;
        },
        onLogin(){
            if(this.loginRefs.text==""||this.loginRefs.password==""){
                Toast("用户名或密码不能为空");
            }
            if(localStorage.getItem("taken")){
                this.loginRefs=localStorage.getItem("taken");
                this.$router.push("home");
                return
            }
        },
        zhuce(){
            if(this.loginRefs.text==""||this.loginRefs.password==""||this.loginRefs.phone==""){
                Toast("用户名、密码、手机号、不能为空");
                return;
            }
            let date={
                phone:this.loginRefs.phone,
                text:this.loginRefs.text,
                password:this.loginRefs.password,
            };
            this.isplay=false;
            localStorage.setItem("taken",JSON.stringify(date));
            this.$store.commit("onLogin",date);
        }
    }
}
</script>

<style lang="scss">
    .login{
        width: 100vw;
        height: 100vh;
        font-size:.16rem;
        background:url("../assets/img/login/back.jpg") no-repeat;
        background-size:100% 100%;
        display:flex;
        justify-content: center;
        align-items: center;
        .login1{
            width: 80%;
            padding:.5rem;
            background:#fff;
            border-radius:1rem;
            h3{
                text-align:center;
                margin:0;
                line-height:.6rem;
                font-size:.4rem;
            }
        }
        .login2{
            width: 80%;
            padding:.5rem;
            background:#fff;
            border-radius:1rem;
            h3{
                text-align:center;
                margin:0;
                line-height:.6rem;
                font-size:.4rem;
            }
        }
    }
</style>